<template>
	<span class="linkbutton">
		<template v-if="props.confirm">
			<el-popconfirm :title="props.confirm" @confirm="doClick" :disabled="props.disabled">
				<template #reference>
					<ElCard v-if="props.isShortCut" :body-style="{ padding: '12px' }">
						<a @click="doClick" :class="{ disabled: props.disabled }">
							<div class="shortcut-icon">
								<span :class="props.icon" :style="{ color: ic }"></span>
							</div>
							<span class="shortcut-text">{{ props.buttonText }}</span>
						</a>
					</ElCard>
					<el-button
						v-else
						:class="props.customClass"
						:style="props.customStyle"
						:type="props.type"
						:text="props.isText"
						:disabled="props.disabled"
						size="small"
					>
						<i v-if="props.icon && !props.isText" :class="props.icon"></i>
						<span>{{ props.buttonText }}</span>
					</el-button>
				</template>
			</el-popconfirm>
		</template>
		<template v-else>
			<ElCard v-if="props.isShortCut" :body-style="{ padding: '12px' }">
				<a @click="doClick" :class="{ disabled: props.disabled }">
					<div class="shortcut-icon">
						<span :class="props.icon" :style="{ color: ic }"></span>
					</div>
					<span class="shortcut-text">{{ props.buttonText }}</span>
				</a>
			</ElCard>
			<el-button
				v-else
				:type="props.type"
				:class="props.customClass"
				:style="props.customStyle"
				:text="props.isText"
				:disabled="props.disabled"
				@click="doClick"
				size="small"
			>
				<i v-if="props.icon && !props.isText" :class="props.icon"></i>
				<span>{{ props.buttonText }}</span>
			</el-button>
		</template>
	</span>
</template>

<script setup lang="ts">
import { defineAsyncComponent, computed } from 'vue';
import other from '/@/utils/other';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';

const viewsModules: any = import.meta.glob('../../views/**/*.{vue,tsx}');
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const emit = defineEmits(['click']);

const props = defineProps({
	type: {
		type: String,
		default: 'primary',
	},
	confirm: {
		type: String,
		default: null,
	},
	url: {
		type: String,
		default: null,
	},
	target: {
		type: String,
		default: 'self', //self,newwindow,dialog
	},
	buttonText: {
		type: String,
		default: '',
	},
	icon: {
		type: String,
		default: null,
	},
	isShortCut: {
		type: Boolean,
		default: false,
	},
	isText: {
		type: Boolean,
		default: false,
	},
	dialogTitle: {
		type: String,
		default: '',
	},
	iconColor: {
		type: String,
		default: null,
	},
	disabled: {
		type: Boolean,
		default: false,
	},
	customClass: {
		type: [String, Array, Object],
		default: null,
	},
	customStyle: {
		type: [String, Array, Object],
		default: null,
	},
});

const ic = computed(() => {
	if (!props.iconColor) {
		return themeConfig.value.primary;
	} else {
		return props.iconColor;
	}
});

const doClick = async () => {
	if (props.url) {
		if (props.target == 'self') {
			window.location.href = '/#' + props.url.replace(/\/index$/, '');
		} else if (props.target == 'dialog') {
			const createDialog = defineAsyncComponent(viewsModules[`../../views${props.url}.vue`]);
			other.openDialog(props.dialogTitle, createDialog);
		} else {
			window.open('/#' + props.url.replace(/\/index$/, ''));
		}
	}
	emit('click');
};
</script>

<style scoped lang="scss">
.linkbutton {
	display: inline-flex;
	align-items: center;
}

a {
	color: var(--el-text-color-regular);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	gap: 8px;
	padding: 8px;
	border-radius: 6px;

	&:hover {
		color: var(--el-color-primary);
		background: var(--el-fill-color-light);

		.shortcut-icon {
			color: var(--el-color-primary);
		}
	}

	.shortcut-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		color: var(--el-text-color-primary);
		transition: color 0.2s ease;
		padding: 8px;
		border-radius: 8px;
		background: var(--el-fill-color-blank);
		border: 1px solid var(--el-border-color-lighter);
	}

	.shortcut-text {
		font-size: 13px;
		line-height: 1.4;
		font-weight: 400;
		color: var(--el-text-color-primary);
	}
}

/* 简约按钮样式设计系统 */
:deep(.el-button) {
	// 基础样式
	height: 36px;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;

	// 简约过渡
	transition: all 0.2s ease;
	cursor: pointer;
	user-select: none;

	// 内容布局
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	// 小尺寸按钮（用于表格操作等）
	&.el-button--small {
		height: 32px;
		padding: 6px 16px;
		font-size: 13px;
	}

	// 默认样式（灰色系）
	background: var(--el-fill-color-blank);
	color: var(--el-text-color-primary);
	border: 1px solid var(--el-border-color);

	// 文本按钮样式
	&.is-text {
		background: transparent;
		border: 1px solid transparent;
		color: var(--el-text-color-primary);
		padding: 6px 12px;

		&:hover {
			background: var(--el-fill-color-light);
			color: var(--el-color-primary);
		}

		&:active {
			background: var(--el-fill-color);
		}
	}

	// 主要按钮类型样式
	&:not(.is-text) {
		// 默认悬停效果
		&:hover {
			background: var(--el-fill-color-light);
			border-color: var(--el-border-color-hover);
			color: var(--el-text-color-primary);
		}

		&:active {
			background: var(--el-fill-color);
		}

		// Primary 按钮
		&.el-button--primary {
			background: var(--el-color-primary);
			border: 1px solid var(--el-color-primary);
			color: var(--el-color-white);

			&:hover {
				background: var(--el-color-primary-light-3);
				border-color: var(--el-color-primary-light-3);
			}

			&:active {
				background: var(--el-color-primary-dark-2);
				border-color: var(--el-color-primary-dark-2);
			}
		}

		// Success 按钮
		&.el-button--success {
			background: var(--el-color-success);
			border: 1px solid var(--el-color-success);
			color: var(--el-color-white);

			&:hover {
				background: var(--el-color-success-light-3);
				border-color: var(--el-color-success-light-3);
			}

			&:active {
				background: var(--el-color-success-dark-2);
				border-color: var(--el-color-success-dark-2);
			}
		}

		// Warning 按钮
		&.el-button--warning {
			background: var(--el-color-warning);
			border: 1px solid var(--el-color-warning);
			color: var(--el-color-white);

			&:hover {
				background: var(--el-color-warning-light-3);
				border-color: var(--el-color-warning-light-3);
			}

			&:active {
				background: var(--el-color-warning-dark-2);
				border-color: var(--el-color-warning-dark-2);
			}
		}

		// Danger 按钮
		&.el-button--danger {
			background: var(--el-color-danger);
			border: 1px solid var(--el-color-danger);
			color: var(--el-color-white);

			&:hover {
				background: var(--el-color-danger-light-3);
				border-color: var(--el-color-danger-light-3);
			}

			&:active {
				background: var(--el-color-danger-dark-2);
				border-color: var(--el-color-danger-dark-2);
			}
		}

		// Info 按钮
		&.el-button--info {
			background: var(--el-color-info);
			border: 1px solid var(--el-color-info);
			color: var(--el-color-white);

			&:hover {
				background: var(--el-color-info-light-3);
				border-color: var(--el-color-info-light-3);
			}

			&:active {
				background: var(--el-color-info-dark-2);
				border-color: var(--el-color-info-dark-2);
			}
		}
	}

	// 禁用状态
	&:disabled,
	&.is-disabled {
		opacity: 0.5;
		cursor: not-allowed;

		&:hover {
			opacity: 0.5 !important;
		}

		// 对于有颜色的按钮，禁用时保持原色但降低透明度
		&.el-button--primary {
			background: var(--el-color-primary) !important;
			border-color: var(--el-color-primary) !important;
			color: var(--el-color-white) !important;
		}

		&.el-button--danger {
			background: var(--el-color-danger) !important;
			border-color: var(--el-color-danger) !important;
			color: var(--el-color-white) !important;
		}

		&.el-button--success {
			background: var(--el-color-success) !important;
			border-color: var(--el-color-success) !important;
			color: var(--el-color-white) !important;
		}

		&.el-button--warning {
			background: var(--el-color-warning) !important;
			border-color: var(--el-color-warning) !important;
			color: var(--el-color-white) !important;
		}

		&.el-button--info {
			background: var(--el-color-info) !important;
			border-color: var(--el-color-info) !important;
			color: var(--el-color-white) !important;
		}
	}

	// 聚焦状态
	&:focus-visible {
		outline: 2px solid var(--el-color-primary-light-7);
		outline-offset: 1px;
	}

	// 图标样式
	i {
		font-size: 14px;
	}
}

// 卡片组件样式优化
:deep(.el-card) {
	border-radius: 8px;
	transition: all 0.2s ease;
	border: 1px solid var(--el-border-color-lighter);
	background: var(--el-bg-color);

	&:hover {
		border-color: var(--el-color-primary-light-7);
		box-shadow: var(--el-box-shadow);
	}

	.el-card__body {
		background: var(--el-bg-color);
	}
}

// 响应式设计
@media (max-width: 768px) {
	:deep(.el-button) {
		height: 32px;
		padding: 6px 12px;
		font-size: 13px;
		border-radius: 4px;

		&.el-button--small {
			height: 28px;
			padding: 4px 10px;
			font-size: 12px;
		}

		i {
			font-size: 13px;
		}
	}

	a {
		gap: 6px;
		padding: 6px;

		.shortcut-icon {
			font-size: 20px;
			padding: 6px;
			border-radius: 6px;
		}

		.shortcut-text {
			font-size: 12px;
		}
	}
}
</style>
